import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createAddPersonAction } from '../../redux/actions/person'
import { nanoid } from 'nanoid'

class Person extends Component {
    addPerson = () => {
		const { addPerson } = this.props
        const name = this.nameNode.value
        const age = this.ageNode.value
		const personObj = {
			id: nanoid(),
			name,
			age
		}
		addPerson(personObj)
		this.nameNode = ''
		this.ageNode = ''
    }
    render() {
		const { allPerson } = this.props
        return (
            <div>
                <h2>我是Person组件</h2>
                <input type="text" ref={c=>this.nameNode =c} placeholder='输入名字' />
                <input type="text" ref={c=>this.ageNode =c} placeholder='输入年龄' />
                <button onClick={this.addPerson}>添加</button>
                <ul>
                    {
						allPerson.map((person) => {
							return <li key={person.id}>{person.name}-{person.age}</li>
						})
					}
                </ul>
            </div>
        )
    }
}

export default connect(
	state => (
		{
			allPerson: state.person
		}
	),
	{
		addPerson: createAddPersonAction
	}
)(Person)
